<template>
  <seq-diagram :headers="headers" :items="items" @line-click="lineClick"/>
</template>
<script>
import SeqDiagram from './SeqDiagram'
export default {
  data() {
    var headers = [
      '192.168.1.11',
      '192.168.1.12',
      '192.168.1.13',
      '192.168.1.14',
      '192.168.1.15',
      '192.168.1.16',
      '192.168.1.17',
      '192.168.1.18',
      '192.168.1.19',
      '192.168.1.20'
    ]
    var data = []
    for (var i = 0; i < 10000; i++) {
      data.push({
        id: i,
        label: '100ms',
        from: headers[i % headers.length],
        to: headers[(i + 3) % headers.length],
        note: 'new order request' + i
      })
    }
    console.log('xxxxxxxxxxxx')

    return {
      headers: headers,
      items: data,
      colWidth: 200
    }
  },
  components: {
    SeqDiagram
  },
  methods: {
    lineClick(index, lineData) {
      console.log(index + '=' + lineData)
    }
  }
}
</script>
